/* @import "tailwindcss/utilities";
 */

@color: #0ebeff;

.btn-effects-container {
  padding: 20px;
  height: 200px;
  display: flex;
  gap: 140px;
  justify-content: center;
  align-items: center;
  background-color: black;

  .btn {
    &-1 {
      --color: #ff8741;
    }

    &-2 {
      --color: #ef75ff;
    }

    &-3 {
      --color: #1bda97;
    }

    --color: @color;

    color: var(--color);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 0;
    width: 160px;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    border-radius: 10px;
    text-align: center;
    -webkit-box-reflect: below 10px
      linear-gradient(transparent, rgba(34, 27, 27, 40%));

    &:hover {
      color: #fff;
      box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);

      &::after,
      &::before {
        transition: 0.3s;
        background: var(--color);
      }
    }

    &::before {
      content: '';
      position: absolute;
      z-index: -2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 150%;
      height: 300%;
      background-color: #000;
      background-repeat: no-repeat;
      background-size: 50% 50%;
      background-position: 0 0;
      background-image: conic-gradient(var(--color), var(--color));
      animation: btn-rotate 2s linear infinite;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      left: 2px;
      top: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      background: #000;
      border-radius: 10px;
    }
  }
}

@keyframes btn-rotate {
  100% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.btn-effects-container.delay-transition {
  .delay-btn {
    --color: @color;

    color: var(--color);
    position: relative;
    width: 200px;
    height: 64px;
    line-height: 64px;
    font-size: 24px;
    text-align: center;
    box-shadow: inset 0 0 0 3px #ddd;
    cursor: pointer;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      box-sizing: border-box;
      // transition: all 1s ease-out;;
      transition-delay: 0.5s;
      border: 3px solid transparent;
    }

    &.both:hover {
      box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);

      &::before {
        width: 100%;
        height: 100%;
        transition: width 0.5s, height 0.5s, border-bottom-color 0s;
        transition-delay: 0.5s, 0s, 0.5s;
        border-left: 3px solid #00e2ff;
        border-bottom: 3px solid #00e2ff;
      }

      &::after {
        width: 100%;
        height: 100%;
        transition: width 0.5s, height 0.5s, border-right-color 0.5s;
        transition-delay: 0s, 0.5s, 0.5s;
        border-top: 3px solid #00e2ff;
        border-right: 3px solid #00e2ff;
      }
    }

    &.rectangle {
      &:hover {
        // color: #00e2ff;
        box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);

        &::before {
          border-color: #00e2ff;
          border: 3px solid #00e2ff;
          width: 100%;
          height: 100%;
          transition: border-top-color 0.25s linear,
            border-right-color 0.25s linear, border-bottom-color 0.25s linear,
            border-left-color 0.25s linear;
          transition-delay: 0s, 0.75s, 0.5s, 0.25s;
        }

        // &::before {
        //   transition: height 0.25s, width 0.25s, border-bottom-color 0.25s;
        //   transition-delay: 0s, 0.25s, 0.25s;
        //   width: 200px;
        //   height: 64px;
        //   border-left: 3px solid #00e2ff;
        //   border-bottom: 3px solid #00e2ff;
        // }

        // &::after {
        //   transition: width 0.25s, height 0.25s, border-top-color 0.25s;
        //   transition-delay: 0.75s, 0.5s, 0.75s;
        //   width: 200px;
        //   height: 70px;
        //   border-top: 3px solid #00e2ff;
        //   border-right: 3px solid #00e2ff;
        // }
      }
    }

    &.circle {
      width: 120px;
      height: 120px;
      line-height: 120px;
      border-radius: 50%;

      &::before,
      &::after {
        border-radius: 50%;
      }

      &:hover {
        color: #00e2ff;

        &::before {
          width: 120px;
          height: 120px;
          border-color: #00e2ff;
          transition: border-top-color 0.25s linear,
            border-right-color 0.25s linear, border-bottom-color 0.25s linear,
            border-left-color 0.25s linear;
          transition-delay: 0s, 0.25s, 0.5s, 0.75s;
        }

        &::after {
          width: 120px;
          height: 120px;
          border-top: 3px solid #00e2ff;
          transform: rotate(270deg);
          transition: transform 0.75s linear;
          transition-delay: 0s;
        }
      }
    }
  }
}
